
new Vue().$mount('#head_app');

var vue = new Vue({
	el : '#user_app',
	data : {
		tableData : [],
		loading: false,
		dialogAdd:false,
		currentPage : 1,
		pagesize : 3,
		totalSize : 100,
		userId : '',
		//穿梭框左侧
		transferLData: [],
		//穿梭框右侧
		transferRData: [],
		url : COMMON_URL.URL+'userMessage/getAllUsers',
		updateUrl : COMMON_URL.URL+'userMessage/updateUser',
		getRoleUrl : COMMON_URL.URL+"userRole/getRoleListByUserId",
		saveRoleUserUrl : COMMON_URL.URL+"userRole/saveUserAndRole",
		deleteRoleUserUrl : COMMON_URL.URL+"userRole/deleteRoleByuserId",
		userConfigUpdate : {
			userCode : '',
			userName : '',
			email : '',
			phone : ''
			
		},
		//form校验规则
		 rules:{
			 userCode:[
	            { required: true, message: '员工号', trigger: 'blur' }
	          ],
	          userName:[
		        { required: true, message: '用户名', trigger: 'blur' }
		      ],
		      email:[
			    { required: true, message: '邮箱', trigger: 'blur' }
			  ],
			  phone:[
				{ required: true, message: '手机', trigger: 'blur' }
			  ]
		  }
	},
	methods : {
		loadData(pageNum,pageSize){
			var tabled = this.tableData ;
			$.ajax({
				url : this.url,
				dataType : 'json',
				type : 'get',
				data : {pageNum:pageNum,pageSize:pageSize},
				success : function(data){
					if(data.ok){
						var value = data.data.list;
						vue.tableData = value;
						vue.currentPage = data.data.currentPage;
						vue.totalSize = data.data.allCounts;
					}
				}
			});
			
		},
		handleSizeChange(val){
			
			this.pagesize = val;
			
			this.loadData(this.currentPage,this.pagesize);
			
		},
		handleCurrentChange(val){
			
			this.currentPage = val;
			this.loadData(this.currentPage,this.pagesize);
		},
		handleUpdate(url,row){
			 $.get(url + row.id,function(data){
					$('#mainApp').html(data);
			  });
			
		},
		handleDelete(index,row,value){
			const h = this.$createElement;
			this.$msgbox({
				title : "警告",
				message : h('p', null, [
		            h('span', null, '请确定是否删除 '),
		            h('i', { style: 'color: teal' }, row.userName)
		          ]),
		          showCancelButton: true,
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          beforeClose: (action, instance, done) => {
		              if (action === 'confirm') {
		                instance.confirmButtonLoading = true;
		                instance.confirmButtonText = '执行中...';
		                
		                $.ajax({
		                	url : COMMON_URL.URL+'userMessage/deleteUserById',
		                	data : {id:row.id},
		                	dataType : 'json',
		                	type : 'get',
		                	success : function(data){
		                		
		                		if(data.ok){
		                			done();
		                			value.splice(index,1);
		                			setTimeout(() => {
		                				instance.confirmButtonLoading = false;
		                			}, 300);
		                		}else{
		                			done();
		                			instance.confirmButtonLoading = false;
		                			swal('删除失败','','error');
		                		}
		                	}
		                });
		                
		              } else {
		                done();
		              }
		            }
			});
			
		},
		//跳转到新页面
		openTab(url,val){
			  $.get(url+val,function(data){
					$('#mainApp').html(data);
			  });
		  },
		  fullForm(row){
			  vue.userConfigUpdate = row;
		  },
		  updateForm(id,row){
			this.$refs[id].validate((valid)=>{
				if(valid){
					$.ajax({
						url : vue.updateUrl,
						dataType : 'json',
						type : 'post',
						contentType : 'application/json',
						data : JSON.stringify(vue.userConfigUpdate),
						success : function(data){
							if(data.ok){
								vue.closePopper();
							}else{
								vue.$message({
									showClose:true,
									type:'warning',
									message:data.msg
								});
							}
							
						}
					});
				}else{
					return false;
				}
			});
		},
		closePopper(){
			vue.loadData(vue.currentPage,vue.pagesize);
			$('#user_controller_btn').trigger("click");
		},
		updateRole(id){
	    	this.dialogAdd =true;
	    	 //加载穿梭框数据
	    	this.loadTranferData(id);
		},
		//穿梭框查询搜索方法
		filterMethod(query, item) {
			//这里可以自定义查询方法
	        return item.label.indexOf(query) > -1;
	    },
	    closeDialog(){
	    	this.dialogAdd = false;
	    },
	    loadTranferData(id){
			vue.transferLData = [];
	    	vue.transferRData = [];
	    	$.ajax({
	    		url : vue.getRoleUrl,
	    		dataType : 'json',
	    		data : {id:id},
	    		type : 'get',
	    		async:false,
	    		success : function(data){
	    			if(data.ok){
	    				var value = data.attrs;
	    				//给userId赋值
	    				vue.userId = value.userId;
	    				var leftData = value.left;
	    				
	    				if(leftData!=null && leftData.length>0){
	    					for(var i=0;i<leftData.length;i++){
		    					var val = leftData[i];
		    					vue.transferLData.push({
		    						label: val.roleDesc,
		    						key: val.id
		    					});
		    				}
	    				}
	    				
	    				var rightData = value.right;
	    				if(rightData != null && rightData.length>0){
	    					for(var i=0;i<rightData.length;i++){
		    					var val = rightData[i];
		    					vue.transferRData.push(val.id);
		    				}
	    				}
	    				
	    			}
	    		}
	    		
	    	});
	    	
	    },
	    addConfigList(){
	    	var userId = vue.userId;
	    	var roleList = vue.transferRData;
	    	
	    	var mesUserAndRoles = [];
	    	
	    	for(var i=0;i<roleList.length;i++){
	    		
	    		var mesUserAndRole = {
	    	    	    userId : userId,
	    	    	    roleId : roleList[i]
	    	    	};
	    		
	    		mesUserAndRoles.push(mesUserAndRole);
	    	};
	    	
	    	if(mesUserAndRoles!=""){
	    		$.ajax({
		    		url : vue.saveRoleUserUrl,
		    		dataType : 'json',
		    		type : 'post',
		    		contentType : 'application/json',
		    		data : JSON.stringify(mesUserAndRoles),
		    		success : function(data){
		    			if(data.ok){
		    				vue.closeDialog();
		    			}
		    		}
		    	});
	    	}else{
	    		
	    		$.ajax({
	    			
	    			url : vue.deleteRoleUserUrl,
	    			dataType : 'json',
	    			type : 'get',
	    			data : {userId : userId},
	    			success : function(data){
	    				if(data.ok){
		    				vue.closeDialog();
		    			}
	    			}
	    		});
	    		
	    	}
	    	
	    	
	    }
	}
	
});

//载入数据
vue.loadData(vue.currentPage, vue.pagesize);
